<template>
	<view class="container">
		<view class="content">
			<view class="tip">
				<uv-line></uv-line>
				<view class="flex">
					<uv-text margin="10px" :text="`下单人 : ${data.userName}`"></uv-text>
					<view class="status-tags" style="margin: 10px;">
						<uv-tags v-if="data.status === 4" :text="'已逾期'" type="warning" size="mini" plain></uv-tags>
						<uv-tags v-else-if="data.status===3" :text="'已拒绝'" type="error" size="mini" plain></uv-tags>
						<uv-tags v-else-if="data.status===2" :text="'已确认'" type="success" size="mini" plain></uv-tags>
						<uv-tags v-else-if="data.status===1" :text="'待确认'" type="primary" size="mini" plain></uv-tags>
					</view>
				</view>
				<uv-line></uv-line>
				<uv-text margin="10px" :text="`下单日期 : ${data.createTime}`"></uv-text>
				<uv-line margin="10px"></uv-line>
				<uv-text margin="10px" :text="`修改时间 : ${data.updateTime}`"></uv-text>
				<uv-line margin="10px"></uv-line>
			</view>

			<view v-for="(item,index) in data.info" :key="index">
				<view class="list-item">
					<view class="flex">
						<uv-image :customStyle="{border: '1rpx solid #dddddd'}" shape="square" radius="5px" fade
							lazyLoad width="154rpx" height="120rpx" :src="item.productPicture"></uv-image>
						<view>
							<uv-text align="left" margin="10px"
								:text="`${item.commodityName} /  ${item.unit}`"></uv-text>
							<uv-number-box integer v-model="item.number" @change="valChange" :name="item.id"
								v-if="item.status == 1">
								<template v-slot:minus>
									<view class="minus">
										<uv-icon name="minus" size="12">
										</uv-icon>
									</view>
								</template>
								<template v-slot:input>
									<input class="input" style="width: 50px;text-align: center;" type="number"
										v-model="item.number" @change="valInputChange(item)" />
								</template>
								<template v-slot:plus>
									<view class="plus">
										<uv-icon name="plus" color="#FFFFFF" size="12">
										</uv-icon>
									</view>
								</template>

							</uv-number-box>
							<uv-text align="left" margin="10px" :text="`数量： ${item.number}`" v-else></uv-text>
						</view>
						<uv-text type="error" text="删除" align="right" @click="delCommodity(item)" v-if="item.status == 1"></uv-text>
					</view>
					<uv-text margin="10px" :text="`${item.remark}`" type="info" v-if="item.remark"></uv-text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import CommodityAPI from '@/api/commodity'
	export default {
		data() {
			return {
				id: '',
				list: [],
				data: {}
			};
		},
		onLoad(e) {
			this.id = e.id
			this.detailInfo()
		},
		methods: {
			detailInfo() {
				CommodityAPI.commodityRecordDetail({
					id: this.id
				}).then(res => {
					this.data = res.data
				})
			},

			delCommodity(item) {
				const id = item.id;
				CommodityAPI.delDetailById(id)
				this.detailInfo()
			},
			valChange(e) {
				const id = e.name;
				const number = e.value;
				CommodityAPI.updateDetailNumberById(id, number)
			},
			valInputChange(item) {
				CommodityAPI.updateDetailNumberById(item.id, item.number)
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		min-height: 100vh;
		background: rgba(247, 248, 250, 1);
	}

	.content {
		width: 98%;
		margin: 0 auto;
	}

	.list-item {
		margin: 0.3rem auto;
		padding: 0.5rem 1rem;
		border-radius: 0.5rem;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	.flex {
		display: flex;
		justify-content: flex-start;
		line-height: 1.4rem;
	}

	.status-tags {
		margin-right: 10px;
	}

	.uv-number-box {
		margin-top: auto;
		margin-left: auto;
	}

	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
    border-radius: 100px;
    /* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #16141D;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>